<template>
	<view class="">
		<view class="top-navbar">
			<u-navbar title="提现到银行卡" :background="{
					backgroundColor: 'transparent'
				}" :border-bottom="false" title-color="#ffffff" back-icon-color="#ffffff"></u-navbar>
		</view>
		<view class="success-box" v-if="isSubmit">
			<image src="/static/success.png" mode="widthFix" style="width: 170rpx;"></image>
			<text class="u-font-32">提现申请成功</text>
			<view class="u-m-t-18 u-light-color u-font-26">
				请耐心等待，您申请的提现金额将在48h内到账
			</view>
		</view>
		<view class="u-p-30" v-else>
			<view class="bg-white radius20 u-m-b-60">
				<view class="card-view" @click="showBank = true">
					<text>提现至</text>
					<view class="u-flex-1 align-right">
						<view class="u-flex u-row-right" v-if="defBank.id">
							<u-image :src="defBank.bank_icon" mode="aspectFit" width="44rpx" height="44rpx"></u-image>
							<text class="u-m-l-10">{{defBank.bank_name}}</text>
							<text class="u-font-24">(尾号{{defBank.bank_code_end}})</text>
						</view>
						<text v-else class="u-tips-color">还未添加银行卡</text>
					</view>
					<u-icon name="arrow-right" color="#D9D9D9" size="24"></u-icon>
				</view>

				<view class="form-view">
					<view class="u-m-b-20 u-font-28">可提现金额 {{maxPrice}}元</view>
					<view class="input-box u-m-b-10">
						<u-field v-model="money" label="￥" placeholder="请输入提现金额" labelWidth="30" type="digit"
							placeholder-style="color:#cecece">
							<view slot="right" class="u-type-primary" @click="money = maxPrice">全部</view>
						</u-field>
					</view>
					<view class="u-font-20 u-type-info">单笔提现至少100.00元</view>
				</view>
			</view>
			<u-button type="success" shape="circle" hover-classs="none" :loading="loading"
				@click="widthDrawHandle">立即提现</u-button>
		</view>

		<u-popup mode="bottom" v-model="showBank" border-radius="20" safe-area-inset-bottom closeable>
			<view class="u-p-30 u-font-28">选择银行卡</view>
			<view class="u-p-30">
				<scroll-view scroll-y="true" style="max-height: 500rpx;">
					<view class="">
						<view class="u-flex u-p-t-24 u-p-b-24 u-p-l-30 u-p-r-30" :class="[defBank.id == item.id?'select-bank':'']"
							v-for="(item,index) in bankList" :key="index" @click="setDefBankCard(item)">
							<view class="u-flex-1 u-flex">
								<u-image :src="item.bank_icon" mode="aspectFit" width="60rpx" height="60rpx"></u-image>
								<text class="u-m-l-15 u-font-32 u-tips-color">{{item.bank_name}}</text>
								<text class="u-m-l-15 u-font-32 u-tips-color">{{item.bank_type}}({{item.bank_code_end}})</text>
							</view>
							<text class="iconfont icon-chenggong u-type-primary" style="font-size: 40rpx;"
								v-if="defBank.id == item.id"></text>
						</view>
					</view>
				</scroll-view>
				<view class="u-font-30 u-tips-color u-m-t-15" @click="toAddBank">
					+ 使用新卡提现
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isSubmit: false,
				money: '',
				defBank: {},
				maxPrice: 0,
				loading: false,
				bankList: [],
				showBank: false
			}
		},
		onShow() {
			this.getBankList()
		},
		onLoad(e) {
			this.getDefBankCard()
			this.maxPrice = e.balance
		},
		methods: {
			getDefBankCard() {
				this.$u.api.defautBank({
					type: 'bank'
				}).then(res => {
					this.defBank = res
					this.maxPrice = res.money
				})
			},
			setDefBankCard(item) {
				this.$u.api.setBankDefaut(item.id, {
					type: 'bank'
				}).then(res => {
					this.defBank = item;
				})
			},
			getBankList() {
				this.$u.api.bankList({
					type: 'bank',
					page: 1,
					limit: 100
				}).then(res => {
					this.bankList = res;
					if (!this.defBank.id && res.length > 0) {
						this.setDefBankCard(res[0])
					}
				})
			},
			widthDrawHandle() {
				if (!this.defBank) {
					this.$u.toast('请选择提现银行卡')
					return;
				}
				if (!this.money) {
					this.$u.toast('请输入提现金额')
					return;
				}
				if (!this.$u.test.amount(this.money)) {
					this.$u.toast('请输入正确的金额')
					return;
				}
				if (parseFloat(this.money) > parseFloat(this.maxPrice)) {
					this.$u.toast('余额不足')
					return;
				}
				this.loading = true
				uni.showLoading({
					title: '正在提现...'
				})
				this.$u.api.widthdraw({
					extract_type: 'bank',
					money: this.money
				}).then(res => {
					this.isSubmit = true
				}).finally(() => {
					this.loading = false
					uni.hideLoading()
				})
			},

			toAddBank() {
				this.showBank = false
				this.$u.route('/pages/subpage/wallet/addCard')
			}
		}
	}
</script>

<style scoped lang="scss">
	.success-box {
		display: flex;
		padding-top: 57rpx;
		flex-direction: column;
		align-items: center;
	}

	.top-navbar {
		background: linear-gradient(169deg, rgba(30, 217, 79, 0.36) 0%, #1ED996 54%, rgba(30, 217, 79, 0.36) 100%);
	}

	.card-view {
		display: flex;
		align-items: center;
		padding: 30rpx 35rpx;
		font-size: 32rpx;
		border-bottom: 1px solid #eeeeee;
	}

	.form-view {
		padding: 35rpx;
	}

	.select-bank {
		border-radius: 10rpx;
		border: 1px solid $u-type-primary;
	}
</style>